<template>
  <div class="component-panel">
    <div class="panel-header">
      <h3>组件库</h3>
    </div>
    
    <div class="panel-content">
      <div class="component-category" v-for="(category, index) in componentCategories" :key="index">
        <div class="category-title">{{ category.title }}</div>
        <div class="category-items">
          <div 
            v-for="(item, itemIndex) in category.items" 
            :key="itemIndex"
            class="component-item"
            draggable="true"
            @dragstart="onDragStart($event, item)"
          >
            <div class="item-icon" v-if="item.icon">{{ item.icon }}</div>
            <div class="item-name">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { usePageStore } from '@/stores/page'

const pageStore = usePageStore()

// 组件分类列表
const componentCategories = ref([
  {
    title: '表单组件',
    items: [
      { type: 'input', name: '输入框', icon: '📝', defaultProps: { label: '输入框', placeholder: '请输入' } },
      { type: 'select', name: '下拉选择', icon: '🔽', defaultProps: { label: '下拉选择', options: [] } },
      { type: 'radio', name: '单选框', icon: '⚪', defaultProps: { label: '单选框', options: [] } },
      { type: 'checkbox', name: '复选框', icon: '✅', defaultProps: { label: '复选框', options: [] } },
      { type: 'date', name: '日期选择', icon: '📅', defaultProps: { label: '日期选择' } },
      { type: 'time', name: '时间选择', icon: '⏰', defaultProps: { label: '时间选择' } },
    ]
  },
  {
    title: '布局组件',
    items: [
      { type: 'container', name: '容器', icon: '📦', defaultProps: { } },
      { type: 'row', name: '行', icon: '↔️', defaultProps: { } },
      { type: 'column', name: '列', icon: '↕️', defaultProps: { } },
      { type: 'tabs', name: '标签页', icon: '📑', defaultProps: { tabs: [] } },
    ]
  },
  {
    title: '展示组件',
    items: [
      { type: 'text', name: '文本', icon: '📄', defaultProps: { content: '文本内容' } },
      { type: 'image', name: '图片', icon: '🖼️', defaultProps: { src: '', alt: '' } },
      { type: 'button', name: '按钮', icon: '🔘', defaultProps: { text: '按钮', type: 'primary' } },
      { type: 'table', name: '表格', icon: '🗃️', defaultProps: { columns: [], data: [] } },
    ]
  },
  {
    title: '高级组件',
    items: [
      { type: 'chart', name: '图表', icon: '📊', defaultProps: { type: 'bar', data: {} } },
      { type: 'custom-js', name: '自定义JS', icon: '📜', defaultProps: { code: '' } },
      { type: 'api', name: 'API请求', icon: '🔌', defaultProps: { url: '', method: 'GET' } },
    ]
  }
])

// 拖拽开始事件处理
const onDragStart = (event: DragEvent, item: any) => {
  if (event.dataTransfer) {
    // 创建新组件配置
    const componentConfig = {
      id: crypto.randomUUID(), // 生成唯一ID
      type: item.type,
      props: { ...item.defaultProps },
      style: {
        position: 'absolute', // 改为绝对定位，确保组件可以在画布上自由定位
        top: '100px',
        left: '100px',
        width: '200px',
        height: 'auto',
        backgroundColor: '#ffffff', // 添加默认背景色
        padding: '10px', // 添加默认内边距
        border: '1px solid #dcdfe6', // 添加默认边框
        borderRadius: '4px', // 添加默认圆角
        zIndex: 1
      },
      dataBindings: [] // 初始化数据绑定数组
    }
    
    // 将组件配置转为JSON字符串，并设置为拖拽数据
    event.dataTransfer.setData('application/json', JSON.stringify(componentConfig))
    
    // 设置拖拽效果
    event.dataTransfer.effectAllowed = 'copy'
  }
}
</script>

<style lang="scss" scoped>
.component-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #e0e0e0;
  background-color: #f9f9f9;
  
  .panel-header {
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
    
    h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: #333;
    }
  }
  
  .panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    
    .component-category {
      margin-bottom: 16px;
      
      .category-title {
        font-size: 14px;
        font-weight: 500;
        color: #666;
        margin-bottom: 8px;
        padding-bottom: 4px;
        border-bottom: 1px dashed #e0e0e0;
      }
      
      .category-items {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        
        .component-item {
          display: flex;
          align-items: center;
          padding: 8px 12px;
          background-color: #fff;
          border: 1px solid #e0e0e0;
          border-radius: 4px;
          cursor: move;
          transition: all 0.2s;
          
          &:hover {
            background-color: #f0f7ff;
            border-color: #a0cfff;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
          }
          
          .item-icon {
            margin-right: 8px;
            font-size: 16px;
          }
          
          .item-name {
            font-size: 13px;
            color: #333;
          }
        }
      }
    }
  }
}
</style>